<template>
	<view class="content">
		<view class="card_top">
			<!-- 			<view class="type">
				<image src="../../static/logo.png" mode=""></image>
				编程专区
			</view> -->

			<view class="title">
				<view class="name">
					<image :src="data.logo||'/static/head_img.jpeg'" mode=""></image>
					<view class="">
						{{data.user||'暂未设置昵称'}}
					</view>
				</view>

				<image class="twoCode" @click="enlargementCode()" src="/static/twoCode.png" mode=""></image>
			</view>

			<u-swiper :list="data.pic_set_c" @click="navPhotoAlbum()" height="300"></u-swiper>
			<view class="address">
				<view class="text" @click="goMap">
					{{data.add||'暂无地址信息'}}
				</view>
				<view class="icon">
					<view class="" @click="goMap">
						<u-icon name="map-fill" size="44"></u-icon>
					</view>
					<view class="" @click="dialPhone">
						<u-icon name="phone-fill" size="44"></u-icon>
					</view>
				</view>

			</view>
		</view>
		<view class="card_bottom">

			<view class="title">
				品牌介绍
			</view>
			<text class="text">
				{{data.brand_content!='null '?data.brand_content:'暂无品牌介绍'}}
			</text>
			<view class="img">
				<view class="imgItem" v-for="(item ,index) in data.brand_set" :key="index"
					@click="enlargement(data.brand_set,index)">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>

			<view class="title">
				视频介绍
			</view>
			<video v-if="data.video_url" object-fit="contain" :src="data.video_url" :direction="0" controls></video>
			<u-empty v-else text="暂无视频介绍" mode="list"></u-empty>
			<view class="title">
				课堂实录
			</view>
			<video v-if="data.video_url_s" object-fit="contain" :src="data.video_url_s" :direction="0" controls></video>
			<u-empty v-else text="暂无课堂视频" mode="list"></u-empty>
			<!-- 		<u-tabs :list="list" :is-scroll="false" active-color="rgb(248,95,0)" :current="current" @change="change">
			</u-tabs> -->
			<view class="title">
				办学资质
			</view>
			<view class="img">
				<view class="imgItem" v-for="(item ,index) in data.pic_set_b" :key="index"
					@click="enlargement(data.pic_set_b,index)">
					<image :src="item" mode="aspectFill"></image>
				</view>
			</view>
			<view class="title">
				师资力量
			</view>
		</view>
		<scroll-view scroll-x>
			<view class="personage">
				<view class="personageItem" v-for="(item ,index) in teacherList" :key="index" @click="navTeacher(item)">
					<view class="img">
						<image :src="item.logo||'/static/head_img.jpeg'" mode="aspectFit"></image>
					</view>
					<view class="">
						{{item.user||'暂无姓名'}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="cord_course">
			<u-tabs :list="list" :is-scroll="false" active-color="rgb(255,97,94)" :current="current" @change="change" :isScroll="true"
				name="title"></u-tabs>
			<scroll-view scroll-x>
				<view class="courseType">
					<view :class="Xindex==index?'courseTypeItem activeColor':'courseTypeItem'"
						v-for="(item ,index) in lists" :key="index" @click="changeType(index)">
						<view class="">
							{{item.title}}
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="activity">
				<!-- 			<view class="title">
					活动
				</view> -->

				<view class="activityItem" v-for="(item ,index) in activityList" :key="index" @click="navCluster(item)">
					<view class="activityImg">
						<image :src="item.pic_s" mode="aspectFill">
						</image>
					</view>
					<view class="activityText">
						<view class="name">
							{{item.title}}
						</view>
						<view class="label">
							<view class="">
								{{item.school_title}}
							</view>
							<view class="">
								{{item.applicable}}
							</view>
							<view class="">
								{{item.pattern}}
							</view>
						</view>
						<view class="money">
							<text
								style="font-size: 26upx;">￥</text>{{item.code1!=-1&&item.code2!=-1?(item.price_a>item.price_b?item.price_b:item.price_a):item.code1==-1?item.price_b:item.price_a}}
						</view>
					</view>
					<view class="activityBtn">
						<view class="">
							<view class="pin" v-if="item.code1!=-1">
								拼
							</view>
							<view class="kan" v-if="item.code2!=-1">
								砍
							</view>
						</view>

					</view>
				</view>
				<u-empty v-if="!activityList.length" text="暂无相关课程" mode="list"></u-empty>

				<view class="more" v-if="activityList.length>=4" @click="navRoute('activityList')">
					查看更多活动>
				</view>
			</view>

			<view class="title">
				课程
			</view>

			<view class="course">
				<view class="courseItem" v-for="(item ,index) in commonList" :key="index" @click="navCluster(item)">
					<view class="headImg">
						<image :src="item.pic" mode="aspectFill">
						</image>
					</view>
					<view class="name">
						{{item.title}}
					</view>
					<view class="modality">
						<view class="">
							{{item.school_title}}
						</view>
						<view class="">
							{{item.pattern}}
						</view>
					</view>
					<text class="grade">
						{{item.applicable}}
					</text>
					<view class="money">
						<text style="font-size: 26upx;">￥</text>{{item.price}}
					</view>
				</view>


			</view>
			<u-empty v-if="!commonList.length" text="暂无相关课程" mode="list"></u-empty>
			<view class="more" @click="navRoute('commonList')" v-if="activityList.length>=6">
				查看更多课程>
			</view>

		</view>

		<!-- 	<u-popup v-model="show" mode="center" backgroundColor="rgba(0,0,0,0)">
			<image style="width: 500upx;height: 500upx;border-radius: 12upx;" show-menu-by-longpress :src="enlargementImg" @click="show=false" mode="aspectFit">
			</image>
			<view style="color: #fff;text-align: center;">
				长按保存
			</view>		
		</u-popup> -->
		<poster ref="poster" style="position: fixed;top: 0;z-index: 999999;" :data="data" :code_url="code_url"></poster>

		<Loading />
	</view>
</template>

<script>
	import poster from './poster.vue'
	export default {
		components: {
			poster,
		},
		data() {
			return {
				data: {},
				code_url: '',
				listSwiper: ['https://img0.baidu.com/it/u=103721101,4076571305&fm=26&fmt=auto&gp=0.jpg'],
				Xindex: 0,
				list: [],
				lists: [],
				teacherList: [],
				current: 0,
				commonList: [],
				activityList: [],
				enlargementImg: '',
				merch_id: ''
			}
		},

		onShow() {
			if (typeof this.$mp.page.getTabBar === 'function' &&
				this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 3 //这个数是，tabBar从左到右的下标，从0开始
				})
			}
		},
		onLoad(e) {
			console.log(e)
			if (e.scene) {
				this.merch_id = e.scene
			} else {
				this.merch_id = e.id
			}
			this.newData()
		},
		methods: {
			newData() {
				// this.$myRuquest('home/merchants/merch_teacher').then(res => {
				// 	if (res.code == 400) {
				// 		this.teacherList = res.data
				// 	}
				// })
				this.$myRuquest('home/index/merchants_details', {
					merch_id: this.merch_id
				}).then(res => {
					if (res.code == 400) {
						this.teacherList = res.data.teacher
						this.data = res.data.merchants
						this.code_url = res.data.code_url
					}
				})



				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 1,
					num: 6
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.commonList = res.data.list
						this.list = res.data.class
						this.list.unshift({
							title: '全部'
						})
						this.list.forEach(item => {
							if (item.en) item.en.unshift({
								title: '全部'
							});
						})
						this.lists = this.list[0].en
					}
				})
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 2,
					num: 4
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.activityList = res.data.list
						this.activityList.forEach(item => {
							item.code1 = item.type.indexOf('2')
							item.code2 = item.type.indexOf('3')
						})
					}
				})
				// 			this.$myRuquest('home/merchants/merch_class').then(res=>{
				// 				if(res.code==400){
				// 					this.list=res.data
				// 					this.list.unshift({title:'全部'})
				// 					this.list.forEach(item=>{
				// if(item.class)	item.class.unshift({title:'全部'});
				// 					})
				// 					this.lists=this.list[0].class
				// 				}
				// 			})
			},
			changeType(index) {
				this.Xindex = index

				//活动课程请求
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 2,
					num: 4,
					aid: this.list[this.current].id,
					bid: this.lists[index].id || ''
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.activityList = res.data.list
						this.activityList.forEach(item => {
							item.code1 = item.type.indexOf('2')
							item.code2 = item.type.indexOf('3')
						})
					}
				})
				//普通课程 请求
				this.$myRuquest('home/index/courses_list', {
					merch_id: this.merch_id,
					type: 1,
					num: 6,
					aid: this.list[this.current].id,
					bid: this.lists[index].id || ''
				}, 'POST').then(res => {
					if (res.code == 400) {
						this.commonList = res.data.list
					}
				})

			},
			change(index) {
				console.log(index)
				this.current = index;
				this.Xindex = 0
				this.lists = this.list[index].en
				let data1 = {
					merch_id: this.merch_id,
					type: 2,
					num: 4,
					aid: this.list[index].id || '',
				}
				if (this.list[index].en) data1.bid = this.list[index].en[this.Xindex].id || ''
				//活动课程请求
				this.$myRuquest('home/index/courses_list', data1, 'POST').then(res => {
					if (res.code == 400) {
						this.activityList = res.data.list
						this.activityList.forEach(item => {
							item.code1 = item.type.indexOf('2')
							item.code2 = item.type.indexOf('3')
						})
					}
				})
				let data2 = {
					merch_id: this.merch_id,
					type: 1,
					num: 6,
					aid: this.list[index].id || '',
				}
				if (this.list[index].en) data2.bid = this.list[index].en[this.Xindex].id || ''
				//普通课程 请求
				this.$myRuquest('home/index/courses_list', data2, 'POST').then(res => {
					if (res.code == 400) {
						this.commonList = res.data.list
					}
				})

			},

			enlargementCode() {
				this.$refs.poster.handleShowPoster()
			},
			enlargement(data, index) {
				console.log(data)
				uni.previewImage({
					urls: data,
					current: index,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片'],
						success: function(data) {},
					}
				});
			},
			goMap() {
				let that = this
				uni.openLocation({
					latitude: +that.data.add_latitude,
					longitude: +that.data.add_longitude,
					success: function() {
						console.log(that.data.add_latitude, that.data.add_longitude);

					},
					fail: function(err) {
						console.log(err);
					}
				});
			},
			dialPhone() {
				uni.makePhoneCall({
					phoneNumber: this.data.service_tel
				});
			},
			navRoute(path) {
				uni.navigateTo({
					url: `/pages/organizationDetails/${path}/${path}?merch_id=${this.merch_id}`
				});
			},
			navCluster(item) {
				uni.navigateTo({
					url: `./clusterHelp/clusterHelp?id=${item.id}`
				});
			},
			navPhotoAlbum() {
				
				uni.navigateTo({
					url: `./photoAlbum/photoAlbum?imgArr1=${this.data.pic_set_d}&imgArr2=${this.data.pic_set_c}`
				});
			},
			navTeacher(item) {
				uni.navigateTo({
					url: `./teacherDetails/teacherDetails?id=${item.id}`
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(247, 247, 247);

	}

	.twoCode {
		width: 100vw;
		height: 100vh;
	}

	.title {
		font-size: 28upx;
		font-weight: 900;
		margin: 20upx 0;
	}

	.more {
		text-align: center;
		color: #767676;
		font-size: 26upx;
		background-color: rgb(247, 247, 247);
		padding: 10upx 0;
	}

	.card_top {
		width: 100%;
		padding: 20upx;
		background-color: #fff;
		margin-bottom: 25upx;

		.type {
			display: flex;

			image {
				width: 40upx;
				height: 40upx;
				margin-right: 10upx;
				border-radius: 12upx;
			}
		}

		.title {
			// font-size: 36upx;
			// font-weight: 900;
			// display: flex;
			// width: 100%;
			position: relative;

			// margin: 20upx 0;
			.name {
				display: flex;
				font-size: 32upx;

				image {
					width: 112upx;
					height: 112upx;
					margin-right: 30upx;
					border-radius: 12upx;

				}

				view {
					height: 112upx;
					line-height: 112upx;
					font-weight: 900;
				}
			}

			>view {
				width: calc(100% - 40upx);
			}

			.twoCode {
				width: 60upx;
				height: 60upx;
				position: absolute;
				right: 0;
				top: 30upx;
				background-image: none;
			}
		}

		.address {
			font-size: 26upx;
			display: flex;
			padding-top: 25upx;

			.text {
				width: calc(100% - 120upx);
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.icon {
				display: flex;
				color: rgb(255, 97, 94);

				view {
					flex: 1;

				}

				view:nth-child(1) {
					border-right: 1upx solid rgb(247, 247, 247);
					padding-right: 20upx;
				}

				view:nth-child(2) {
					padding-left: 20upx;
				}
			}
		}
	}

	.card_bottom {
		width: 100%;
		padding: 20upx;
		background-color: #fff;



		.title {
			font-weight: 900;
			font-size: 28upx;
			margin: 20upx 0 15upx 0;
		}

		.text {
			color: #333;
			font-size: 24upx;
		}

		.img {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 20upx;

			.imgItem {
				flex: 0 0 32%;
				height: 225upx;
				margin: 2px;
				border-radius: 12upx;
				overflow: hidden;
				transition: all .5s;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		video {
			width: calc(100vw - 40upx);
		}

	}

	.personage {
		display: flex;
		background-color: #fff;
		padding: 0 20upx;
		padding-bottom: 20upx;

		.personageItem {
			width: 120upx;
			margin: 0 10upx;
			margin-right: 50upx;
			font-size: 24upx;
			font-weight: 900;

			.img {

				width: 130upx;
				height: 130upx;
				padding: 10upx;
				border: 1upx solid rgba(255, 100, 0, .5);
				border-radius: 50%;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
					// margin: 0 10upx;
				}
			}


			view {
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin: 0 auto;
				margin-top: 20upx;
			}
		}
	}

	.cord_course {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 20upx;
		padding-bottom: 160upx;

		.courseType {

			display: -webkit-box;
			background-color: #fff;
			// padding: 0 20upx;
			// padding-bottom: 20upx;


			.courseTypeItem {
				font-size: 24upx;
				font-weight: 900;
				background-color: #F4F5F7;
				color: rgb(115, 115, 115);
				margin: 10upx;
				border-radius: 8upx;
				transition: all .2s;

				view {
					padding: 5upx 10upx;
				}
			}
		}

		.activity {
			.activityItem {
				display: flex;
				position: relative;
				margin: 20upx 0;
				padding-bottom: 20upx;
				border-bottom: 1rpx solid rgba(0, 0, 0, .1);

				.activityImg {
					width: 150upx;
					height: 150upx;
					border-radius: 12upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.activityText {
					margin: 0 20upx;
					width: 500upx;

					.name {
						font-weight: 900;
					}

					.label {
						display: flex;
						font-size: 24upx;
						margin: 16upx 0;
						color: #767676;

						view {
							margin-left: 10upx;
							margin-right: 30upx;
							background-color: #F4F5F7;
							padding: 0 10upx;
							border-radius: 7upx;
						}

						// view:nth-child(1),
						// view:nth-child(2) {
						// 	border-right: 1upx solid #a8a8a8;

						// }


					}

					.money {
						color: rgb(255, 97, 94);
						font-weight: 900;
						margin-left: 10upx;
						font-size: 36upx;
					}
				}
			}

			.activityItem:last-child {
				border: none;
			}

		}

		.course {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			view:nth-child(odd) {
				margin-right: 2%;
			}

			.courseItem {
				width: 49%;
				margin-bottom: 20upx;

				.headImg {
					width: 100%;
					height: 194upx;
					border-radius: 12upx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					font-weight: 900;
					font-size: 28upx;
					margin: 14upx 0;
				}

				.modality {
					width: 100%;
					display: flex;
					font-size: 24upx;
					margin-bottom: 14upx;
					color: #666666;

					view:nth-child(1) {
						margin-right: 40upx;
					}

					view {
						// width: 45%;
						padding: 0upx 10upx;
						background-color: #F4F5F7;
						border-radius: 8upx;
					}
				}

				.grade {
					font-size: 24upx;
					color: #666666;
					// margin: 14upx 0;
					padding: 0upx 10upx;
					border-radius: 8upx;
					background-color: #F4F5F7;
				}

				.money {
					color: rgb(255, 97, 94);
					font-weight: 900;
					font-size: 36upx;
					margin-top: 14upx;
				}
			}
		}
	}

	.activityBtn {
		position: absolute;
		right: 0;
		height: 100%;
		display: inline-block;

		>view:nth-child(1) {
			display: flex;
			font-size: 18upx;
			color: #fff;


			view {
				width: 30upx;
				height: 30upx;
				line-height: 30upx;
				border-radius: 4upx;
				text-align: center;
				margin-left: 20upx;
			}

			.pin {
				background: linear-gradient(to bottom right, rgb(254, 162, 120), rgb(253, 61, 93));

			}

			.kan {
				background: linear-gradient(to bottom right, rgb(254, 188, 128), rgb(254, 153, 47));
			}
		}
	}

	.activeColor {
		background-color: rgba(248, 95, 0, .1) !important;
		color: rgb(255, 97, 94) !important;

	}
</style>
